---
title: Decap CMS & Astro
description: Ajouter du contenu à votre projet Astro en utilisant Decap comme CMS
type: cms
stub: true
service: Decap CMS
i18nReady: true
---
import Grid from '~/components/FluidGrid.astro'
import Card from '~/components/ShowcaseCard.astro'
import { FileTree } from '@astrojs/starlight/components'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[Decap CMS](https://www.decapcms.org/) (anciennement Netlify CMS) est un système de gestion de contenu open-source basé sur Git.

Decap vous permet de profiter pleinement de toutes les fonctionnalités d'Astro, y compris l'optimisation des images et les collections de contenu.

Decap ajoute une route (typiquement `/admin`) à votre projet qui chargera une application React pour permettre aux utilisateurs autorisés de gérer le contenu directement depuis le site web déployé. Decap commettra les changements directement dans le référentiel source de votre projet Astro.

## Installation de DecapCMS

Il existe deux options pour ajouter Decap à Astro :

1. [Installer Decap via un gestionnaire de paquets](https://decapcms.org/docs/install-decap-cms/#installing-with-npm) avec la commande suivante :


    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install decap-cms-app
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add decap-cms-app
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add decap-cms-app
      ```
      </Fragment>
    </PackageManagerTabs>


2. Importez le paquet dans une balise `<script>` de votre page `<body>`

    ```html title='/admin'
     <body>
       <!-- Inclure le script qui construit la page et alimente Decap CMS -->
       <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
     </body>
    ```


## Configuration

1. Créez un dossier d'administration statique dans `public/admin/`
2. Ajoutez `config.yml` à `public/admin/` :
    <FileTree>
      - public
        - admin
          - config.yml
    </FileTree>
3. Pour ajouter le support des collections de contenu, configurez chaque schéma dans `config.yml`. L'exemple suivant configure une collection `blog`, en définissant un `label` pour la propriété frontmatter de chaque entrée :
   ```yml title="/public/admin/config.yml"
   collections:
     - name: "blog" # Utilisé dans les routes, par exemple, /admin/collections/blog
       label: "Blog" # Utilisé dans l'UI
       folder: "src/content/blog" # Chemin d'accès au dossier dans lequel les documents sont stockés
       create: true # Permettre aux utilisateurs de créer de nouveaux documents dans cette collection
       fields: # Les champs de chaque document, généralement en tête de page
         - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
         - { label: "Title", name: "title", widget: "string" }
         - { label: "Publish Date", name: "date", widget: "datetime" }
         - { label: "Featured Image", name: "thumbnail", widget: "image" }
         - { label: "Rating (scale of 1-5)", name: "rating", widget: "number" }
         - { label: "Body", name: "body", widget: "markdown" }
    ```

4. Ajoutez la route `admin` pour votre application React. Ce fichier peut-être soit `public/admin/index.html` à côté de votre `config.yml` ou, si vous préférez utiliser une route Astro, `src/pages/admin.astro`.

 <FileTree>
    - public
      - admin
         - config.yml
         - index.html
    </FileTree>
    ```html title="/public/admin/index.html" {7, 11}
    <!doctype html>
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="robots" content="noindex" />
        <link href="/admin/config.yml" type="text/yaml" rel="cms-config-url" />
        <title>Gestionnaire de contenu</title>
      </head>
      <body>
        <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
      </body>
    </html>
    ```

5. Pour permettre le téléchargement de médias dans un dossier spécifique via l'éditeur Decap, ajoutez un chemin d'accès approprié :
    ```yml title="/public/admin/config.yml"
     media_folder: "src/assets/images" # Emplacement où les fichiers seront stockés dans le dépôt 
     public_folder: "src/assets/images" # L'attribut src pour les médias téléchargés
    ```

Voir la [documentation de configuration du CMS Decap](https://decapcms.org/docs/configure-decap-cms/) pour des instructions et des options complètes.

## Utilisation
Naviguez vers `votre site.com/admin/` pour utiliser l'éditeur de Decap CMS.

## Authentification

### Decap CMS avec Netlify Identity

Decap CMS a été développé à l'origine par Netlify et dispose d'un support pour [Netlify Identity](https://docs.netlify.com/security/secure-access-to-sites/identity/).

Lors du déploiement sur Netlify, configurez l'identité pour votre projet via le tableau de bord Netlify et incluez le [Netlify Identity Widget](https://github.com/netlify/netlify-identity-widget) sur la route `admin` de votre projet. Vous pouvez également inclure le widget d'identité sur la page d'accueil de votre site si vous prévoyez d'inviter de nouveaux utilisateurs par e-mail.

### Decap CMS avec des clients OAuth externes

Lorsque vous déployez vers des hébergeurs autres que Netlify, vous devez créer vos propres routes OAuth.

Dans Astro, cela peut être fait avec des routes rendues à la demande dans votre projet configuré avec [la sortie `server` ou `hybrid`](/fr/guides/server-side-rendering/#activer-le-rendu-à-la-demande-du-serveur) activé.

Voir [Decap's OAuth Docs](https://decapcms.org/docs/external-oauth-clients/) pour une liste de clients OAuth compatibles maintenus par la communauté.

## Ressources communautaires 

- Utilisez l'intégration Astro [`astro-netlify-cms`](https://github.com/delucis/astro-netlify-cms) pour ajouter Netlify CMS à votre projet.

- Vous pouvez commencer avec le kit [Astro Blog Starter with Netlify CMS](https://github.com/delucis/astro-netlify-cms-starter).

- Article de blog : [Créez le contenu de votre site Astro avec des CMS basés sur Git](https://aalam.vercel.app/blog/astro-and-git-cms-netlify) par Aftab Alam 

- Tutoriel Youtube : [Créez un blog personnalisé avec Astro et NetlifyCMS en quelques minutes](https://www.youtube.com/watch?v=3yip2wSRX_4) par Kumail Pirzada

## Sites de production

Les sites suivants utilisent Astro + Decap CMS en production :

- [yunielacosta.com](https://www.yunielacosta.com/) par Yuniel Acosta - [code source sur GitHub](https://github.com/yacosta738/yacosta738.github.io) (Netlify CMS)
- [portfolioris.nl](https://www.portfolioris.nl/) par Joris Hulsbosch - [code source sur GitHub](https://github.com/portfolioris/portfolioris.nl)

## Thèmes

<Grid >
  <Card title="Astros" href="https://astro.build/themes/details/astros" thumbnail="astros.png"/>
  <Card title="Enhanced Astro Starter" href="https://astro.build/themes/details/enhanced-astro-starter" thumbnail="enhanced-astro-starter.png"/>
  <Card title="Astro Decap CMS Starter" href="https://astro.build/themes/details/astro-decap-cms-starter" thumbnail="astro-decap-starter.png"/>
</Grid>
